/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-01-23 13:23:23
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-23 13:55:51
 */
import 'package:flutter/material.dart';
import 'package:flutter_desktop/models/current_track.dart';
import 'package:provider/provider.dart';

class CurrentTrack extends StatelessWidget {
  const CurrentTrack({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 84,
      width: double.infinity,
      color: Colors.black87,
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Row(
          children: [
            const TrackInfo(),
            const Spacer(),
            const PlayerControls(),
            const Spacer(),
            if (MediaQuery.of(context).size.width > 800) const MoreControls()
          ],
        ),
      ),
    );
  }
}

class MoreControls extends StatelessWidget {
  const MoreControls({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          onPressed: () {},
          iconSize: 20,
          padding: const EdgeInsets.only(),
          icon: const Icon(
            Icons.devices_outlined,
          ),
        ),
        Row(
          children: [
            IconButton(
              onPressed: () {},
              iconSize: 20,
              padding: const EdgeInsets.only(),
              icon: const Icon(
                Icons.volume_up_outlined,
              ),
            ),
            Container(
              height: 5.0,
              width: 70,
              decoration: BoxDecoration(
                  color: Colors.grey[800],
                  borderRadius: BorderRadius.circular(2.5)),
            ),
          ],
        ),
        IconButton(
          onPressed: () {},
          iconSize: 34,
          padding: const EdgeInsets.only(),
          icon: const Icon(
            Icons.fullscreen_outlined,
          ),
        ),
      ],
    );
  }
}

class PlayerControls extends StatelessWidget {
  const PlayerControls({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final selected = context.watch<CurrentTrackModel>().selected;
    if (selected == null) return const SizedBox.shrink();
    return Column(
      children: [
        Row(
          children: [
            IconButton(
              onPressed: () {},
              iconSize: 20,
              padding: const EdgeInsets.only(),
              icon: const Icon(
                Icons.shuffle,
              ),
            ),
            IconButton(
              onPressed: () {},
              iconSize: 20,
              padding: const EdgeInsets.only(),
              icon: const Icon(
                Icons.skip_previous_outlined,
              ),
            ),
            IconButton(
              onPressed: () {},
              iconSize: 34,
              padding: const EdgeInsets.only(),
              icon: const Icon(
                Icons.play_circle_fill_outlined,
              ),
            ),
            IconButton(
              onPressed: () {},
              iconSize: 20,
              padding: const EdgeInsets.only(),
              icon: const Icon(
                Icons.skip_next_outlined,
              ),
            ),
            IconButton(
              onPressed: () {},
              iconSize: 20,
              padding: const EdgeInsets.only(),
              icon: const Icon(
                Icons.repeat,
              ),
            ),
          ],
        ),
        const SizedBox(height: 4.0),
        Row(
          children: [
            Text("0:00", style: Theme.of(context).textTheme.caption),
            const SizedBox(
              width: 7.0,
            ),
            Container(
              height: 5.0,
              width: MediaQuery.of(context).size.width * 0.3,
              decoration: BoxDecoration(
                  color: Colors.grey[800],
                  borderRadius: BorderRadius.circular(2.5)),
            ),
            const SizedBox(
              width: 8.0,
            ),
            Text(
              selected.duration,
              style: Theme.of(context).textTheme.caption,
            )
          ],
        ),
      ],
    );
  }
}

class TrackInfo extends StatelessWidget {
  const TrackInfo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final selected = context.watch<CurrentTrackModel>().selected;
    if (selected == null) return const SizedBox.shrink();
    return Row(
      children: [
        Image.asset(
          'assets/lofigirl.jpg',
          height: 60,
          width: 60,
          fit: BoxFit.cover,
        ),
        const SizedBox(width: 12.0),
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              selected.title,
              style: Theme.of(context).textTheme.bodyText1,
            ),
            const SizedBox(width: 4.0),
            Text(
              selected.artist,
              style: Theme.of(context).textTheme.subtitle1!.copyWith(
                    color: Colors.grey[300],
                    fontSize: 12.0,
                  ),
            ),
          ],
        ),
        const SizedBox(width: 12.0),
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.favorite_border),
        )
      ],
    );
  }
}
